<template>
    <div class="page-container">
        <div class="notice-header">
            <span class="notice-title">系统公告</span>
        </div>
        <div class="notice-search">
            <el-form :inline="true" class="demo-form-inline" :model="searchForm">
                <el-form-item label="公告标题">
                    <el-input placeholder="请输入公告标题" v-model="searchForm.title"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleSearch" class="gold-btn">查询</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="notice-card-list">
            <div v-for="item in list" :key="item.id" class="notice-card">
                <div class="notice-card-title">{{ item.title }}</div>
                <div class="notice-card-meta">
                    <span class="notice-card-time">发布时间：{{ item.createTime }}</span>
                    <el-button @click="$router.push(`/front/noticeDetails/${item.id}`)" type="text" size="small" class="gold-link">查看</el-button>
                </div>
            </div>
        </div>
        <div class="notice-pagination">
            <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="pageNum" :page-sizes="[10, 20]" :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
import {
    findNoticePageAPI,
} from "@/api/notice";

export default {
    data() {
        return {
            list: [],
            listLoading: true,
            pageSize: 10,
            pageNum: 1,
            total: 0,
            searchForm: {},
        };
    },
    created() {
        this.fetchData();
    },
    methods: {
        handleSizeChange(val) {
            this.pageSize = val;
            this.fetchData();
        },
        handleCurrentChange(val) {
            this.pageNum = val;
            this.fetchData();
        },
        handleSearch() {
            this.fetchData();
        },
        async fetchData() {
            this.listLoading = true;
            let response = await findNoticePageAPI(
                this.pageNum,
                this.pageSize,
                this.searchForm
            );
            this.list = response.data.records;
            this.total = response.data.total;
            this.listLoading = false;
        },
    },
};
</script>

<style lang="less" scoped>
@deep-bg: linear-gradient(135deg, #232946 0%, #393e46 100%);
@gold: #ffd700;
@main-blue: #409EFF;
@light-gray: #bbb;

.page-container {
    width: 1200px;
    margin: 30px auto;
    background: transparent;
}

.notice-header {
    background: rgba(35,41,70,0.92);
    border-radius: 14px 14px 0 0;
    padding: 28px 36px 18px 36px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.10);
    border: 1.5px solid @gold;
    border-bottom: none;
}
.notice-title {
    font-size: 32px;
    font-weight: bold;
    color: @gold;
    letter-spacing: 2px;
}

.notice-search {
    background: rgba(35,41,70,0.92);
    border-radius: 0 0 0 0;
    padding: 24px 36px 12px 36px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    border-left: 1.5px solid @gold;
    border-right: 1.5px solid @gold;
    border-bottom: none;
    margin-bottom: 0;
    .el-form-item__label {
        color: @light-gray !important;
    }
    .el-input__inner {
        background: #232946 !important;
        color: #fff !important;
        border-radius: 6px;
        border: 1px solid #393e46;
    }
    .gold-btn {
        background: @gold !important;
        border-color: @gold !important;
        color: #232946 !important;
        font-weight: bold;
        border-radius: 6px;
    }
    .gold-btn:hover {
        filter: brightness(1.1);
        color: #232946 !important;
    }
}

.notice-card-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
    background: transparent;
    padding: 36px 36px 0 36px;
    border-left: 1.5px solid @gold;
    border-right: 1.5px solid @gold;
}
.notice-card {
    background: #2d3142;
    border-radius: 12px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.10);
    border: 1.5px solid @gold;
    padding: 28px 32px 18px 32px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: box-shadow 0.2s, transform 0.2s;
    color: #fff;
    position: relative;
    &:hover {
        box-shadow: 0 8px 32px rgba(0,0,0,0.18);
        transform: translateY(-2px) scale(1.01);
    }
}
.notice-card-title {
    font-size: 22px;
    font-weight: bold;
    color: @light-gray;
    margin-bottom: 16px;
    word-break: break-all;
}
.notice-card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 15px;
    color: @light-gray;
}
.notice-card-time {
    color: @light-gray;
}

.notice-pagination {
    background: rgba(35,41,70,0.92);
    border-radius: 0 0 14px 14px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    border-left: 1.5px solid @gold;
    border-right: 1.5px solid @gold;
    border-top: none;
    padding: 18px 0 18px 0;
    margin-bottom: 0;
    display: flex;
    justify-content: center;
}

.gold-link {
    color: @gold !important;
    font-weight: bold;
}
.gold-link:hover {
    text-decoration: underline;
    color: lighten(@gold, 10%) !important;
}
</style>